<template>
    <div class="membership-benefits">
        <h1>会员权益</h1>
        <div class="benefit-list">
            <div class="benefit-item" v-for="(benefit, index) in benefits" :key="index">
                <i class="iconfont icon-pingtaizhekou"></i>
                <h2>
                    {{ benefit.title }}
                    <el-badge value="新" v-if="index === 1"></el-badge>
                </h2>
                <p>{{ benefit.description }}</p>
            </div>
        </div>
        <div class="footer">
            <p>立即加入，享受更多福利！</p>
            <button @click="joinMembership">加入会员</button>
        </div>
    </div>
</template>

<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElScrollbar, ElBadge } from 'element-plus'
export default {
    setup() {
        const router = useRouter();
        const benefits = ref([
            {
                title: '专属折扣',
                description: '会员享受所有商品的专属折扣优惠。',
            },
            {
                title: '提前预定',
                description: '会员可以提前预定热门商品和服务。',
            },
            {
                title: '积分奖励',
                description: '消费可获得积分，积分可抵扣现金。',
            },
            {
                title: '免费赠品',
                description: '会员每月可获得一次免费的赠品。',
            },
            {
                title: '优先客服',
                description: '会员可享受优先客服服务。',
            },
        ]);

        const joinMembership = () => {
            //跳转会员页面
            router.push('/vip');
        };

        return {
            benefits,
            joinMembership,
        };
    },
};
</script>

<style scoped lang="scss">
.membership-benefits {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

.benefit-list {
    margin: 20px 0;
}

.benefit-item {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;

    .iconfont {
        font-size: 30px;
    }

    &:hover {
        background-color: #f0f8ff;
        transform: scale(1.05);
        /* 添加缩放效果 */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        cursor: pointer;
        /* 鼠标指针改变 */
        /* 添加阴影效果 */
        /* hover 时的背景颜色 */
    }
}

.footer {
    margin-top: 30px;

    p {
        animation: breath 2s infinite;
    }

    @keyframes breath {
        0% {
            opacity: 1;
            transform: scale(1);
        }

        50% {
            opacity: 0.7;
            transform: scale(1.05);
        }

        100% {
            opacity: 1;
            transform: scale(1);
        }
    }
}

button {
    padding: 10px 20px;
    background-color: $xtxColor;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}
</style>